import type { FormInstance, FormRules } from "element-plus";
import { getCurrentInstance, reactive, ref } from "vue";

export function useLoserRegist() {
  const ruleFormRef = ref<FormInstance>();
  const LoserRuleForm = reactive<any>({
    l_name: "",
    l_type: "",
    l_birth_date: "",
    l_miss_date: "",
    l_birth_addr: "",
    l_miss_addr: "",
    l_sex: "",
    l_descript: "",
  });
  const LoserRules = reactive<FormRules>({
    l_name: [
      { required: true, message: "请输入失踪人姓名", trigger: "change" },
    ],
    l_type: [
      {
        required: true,
        message: "请选择失踪类型",
        trigger: "change",
      },
    ],
    l_birth_date: [
      {
        type: "date",
        required: true,
        message: "请选择出生日期",
        trigger: "change",
      },
    ],
    l_miss_date: [
      {
        type: "date",
        required: true,
        message: "请选择失踪日期",
        trigger: "change",
      },
    ],
    l_birth_addr: [
      {
        required: true,
        message: "请选择出生地址",
        trigger: "change",
      },
    ],
    l_miss_addr: [
      {
        required: true,
        message: "请选择失踪地址",
        trigger: "change",
      },
    ],
    l_sex: [
      {
        required: true,
        message: "请选择失踪人性别",
        trigger: "change",
      },
    ],
    l_descript: [
      { required: true, message: "失踪人的特征描述", trigger: "blur" },
    ],
  });

  const LinkFormRef = ref<FormInstance>();
  const LinkForm = reactive<any>({
    m_name: "",
    m_phone: "",
    m_email: "",
    m_wechat: "",
    m_addr: "",
    m_relat_l: "",
  });
  const LinkRules = reactive<FormRules>({
    m_name: [
      { required: true, message: "请输入联系人姓名", trigger: "change" },
    ],
    m_relat_l: [
      {
        required: true,
        message: "请输入与联系人关系",
        trigger: "change",
      },
    ],
    m_phone: [
      {
        required: true,
        message: "请输入联系人电话",
        trigger: "change",
      },
    ],
    m_email: [
      {
        required: true,
        message: "请输入联系人邮箱",
        trigger: "change",
      },
    ],
    m_wechat: [
      {
        required: true,
        message: "请输入联系人微信",
        trigger: "change",
      },
    ],
    m_addr: [
      {
        required: true,
        message: "请输入联系人地址",
        trigger: "change",
      },
    ],
  });

  const addVisible = ref(false);
  //渲染页面的url
  const LoserImage = ref("");
  //用于存储数据库的url
  const LoserUrl = ref("");
  //获取本地图片
  const handleLoser = (e: any) => {
    const fd = new FileReader();
    fd.readAsDataURL(e.file);
    LoserImage.value = URL.createObjectURL(e.file);
    LoserUrl.value = "https://img2.baidu.com/it/" + e.file.name.slice(0, -5);
  };

  return {
    ruleFormRef,
    LoserRuleForm,
    LoserRules,
    LinkFormRef,
    LoserUrl,
    LinkForm,
    LinkRules,
    LoserImage,
    addVisible,
    handleLoser,
  };
}
